<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <title>OTA</title>
</head>

<body>
    <h4 style="display:inline;">OTA升级</h4>
    <br />
    <button id="open-file">选择文件</button><label id="fileName"></label><br /><br /><button id="upload">升级</button><span
        id="percentInfo"></span><br /><br />
    <script>
        //选择文件
        let file;
        function openFilePicker({ fn, accept, multiple } = {}) {
            const inpEle = document.createElement("input");
            inpEle.id = `__file_${Math.trunc(Math.random() * 100000)}`;
            inpEle.type = "file";
            inpEle.style.display = "none";
            // 文件类型限制
            accept && (inpEle.accept = accept);
            // 多选限制
            multiple && (inpEle.multiple = multiple);
            inpEle.addEventListener("change", event => fn.call(inpEle, event, inpEle.files), { once: true });
            inpEle.click();
        }
        document.getElementById("open-file").addEventListener("click", () => {
            openFilePicker({
                fn: (e, files) => {
                    file = files[0];
                    document.getElementById("fileName").innerHTML = file.name + ' ' + getfilesize(file.size);
                    document.getElementById("percentInfo").innerHTML = "";
                    console.group("获取到的文件");
                    console.log("files", files);
                    console.groupEnd();
                }
            });
        });
        function getfilesize(size) {
            if (!size)
                return "";
            var num = 1024.00; //byte
            if (size < num)
                return size + "B";
            if (size < Math.pow(num, 2))
                return (size / num).toFixed(2) + "KB"; //kb
            if (size < Math.pow(num, 3))
                return (size / Math.pow(num, 2)).toFixed(2) + "MB"; //M
            if (size < Math.pow(num, 4))
                return (size / Math.pow(num, 3)).toFixed(2) + "GB"; //G
            return (size / Math.pow(num, 4)).toFixed(2) + "T"; //T
        }
        //文件上传
        document.getElementById("upload").addEventListener("click", async () => {
            function progressFunction(e) {
                if (e.lengthComputable) {
                    // 获取百分制的进度
                    var percent = Math.round(e.loaded / e.total * 100);
                    // 进度数值按百分制来
                    document.getElementById("percentInfo").innerHTML = "升级进度：" + percent + "%";
                }
            }
            let xhr = new XMLHttpRequest();
            xhr.upload.onprogress = progressFunction;
            let percentInfo = document.getElementById("percentInfo");
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4) {
                    if (xhr.status == 200 && JSON.parse(xhr.response).result == 'ok') {
                        percentInfo.innerHTML += ' 成功'
                    } else {
                        percentInfo.innerHTML += ' 失败'
                    }
                    console.log(xhr.responseText)
                }
            }
            var fd = new FormData()
            fd.append('file', file);
            xhr.open('POST', '/update_start')
            xhr.send(fd)
        });
    </script>
</body>

</html>